<template>
    <div>
        <div class="head">
            <h1>泊车相见，清除乱停放</h1>
            <van-icon name="close" @click="outUser()" size="30px" />
        </div>

        <div class="BD">

        </div>

        <div class="function">
            <ul>
                <li @click="upload()">
                    <img src="../../assets/images/home/photo.png" alt="">
                    <p>上传</p>
                </li>
                <li @click="emergency()">
                    <img src="../../assets/images/home/emergency.png" alt="">
                    <p>紧急</p>
                </li>
                <li @click="">
                    <img src="../../assets/images/home/Integral.png" alt="">
                    <p>积分</p>
                </li>
                <li @click="">
                    <img src="../../assets/images/home/Recording.png" alt="">
                    <p>历史</p>
                </li>
            </ul>
        </div>

        <div class="order" v-if="dataSource.reportData.length > 0" :key="index">
            <div v-if="dataSource.reportData.length > 0">
                <head-img :src="`${URL}${dataSource.reportData[dataSource.reportData.length - 1].report_image}`"
                    size="80px"></head-img>
                <div class="text">
                    <h2>正在处理中...</h2>
                    <p>{{ dataSource.reportData[dataSource.reportData.length - 1].report_reason }}</p>
                </div>
            </div>
            <van-button round type="success" color="#30a7d7" size="normal" @click="order(report.id)">详情</van-button>
        </div>

        <div class="post">
            <ul>
                <li v-for="(item, index) in postSource.list" :max-count="1" @click="postinfo(item.post_id)">
                    <head-img></head-img>
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.publish_time }}</p>
                </li>
            </ul>
        </div>

        <!-- 浮动组件 -->
        <van-floating-bubble axis="xy" icon="add" magnetic="x" @offset-change="onOffsetChange" @click="publishPost" />


        <van-tabbar v-model="active" route>
            <van-tabbar-item icon="wap-home" replace to="/home/home">主页</van-tabbar-item>
            <van-tabbar-item icon="comment" replace to="/message/contactrelist">消息</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart" replace to="/shop/shop">商店</van-tabbar-item>
            <van-tabbar-item icon="friends" replace to="/user/userinfo">我的</van-tabbar-item>
        </van-tabbar>
        <div class="block"></div>
    </div>
</template>

<script setup>
// 导入依赖
import { POST, GET } from "../../tools/fetch";
import { postApi, reportApi, baseURL } from '../../tools/api.js';
// 路由相关的，允许你用js控制路由，跳转组件一点就的走，但是此时控制了，不是直接点了就跳转，需要js控制允许控制转向其他路由
//  控制路由（走的时候）访问路由（来的时候）
// import {useRouter,useRoute} from 'vue-router';
import { FloatingBubble } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
// token
import { useUserStore } from '../../tools/storage.js';
// 初始化
const userStore = useUserStore();
const URL = baseURL;

/*--------------------------------------*/
//存储订单
const dataSource = ref({
    reportData: [],
    getmyRepored: []

})

//存储帖子
const postSource = ref({
    list: []
})

const outUser = () => {
    userStore.setLogout();
    router.replace('/user/login')
}

const order = (id) => {
    const param = id;
    router.replace({ name: 'contactreList', query: { id: param } })
}

//上传跳转
const upload = () => {
    router.replace('/home/upload')
}
const emergency = () => {
    router.replace('/home/emergency')
}

//发布帖子跳转
const publishPost = () => {
    router.replace({name:'publishpost'})
}

//帖子页面详情
const postinfo = (id) => {
    const param = id;
    router.replace({ name: 'postinfo', query: { id: param } })
}


// 页面加载时调用
const onLoad = async () => {
    const resResult = await GET({
        api: postApi.allpost
    })
    console.log(resResult);
    postSource.value.list = resResult.data

    //获得我的举报
    const resResult1 = await GET({
        api: reportApi.getReport,
    })
    dataSource.value.reportData = resResult1.data

    //获得我被举报的
    const resResult2 = await GET({
        api: reportApi.getmyRepored
    })
    dataSource.value.getmyRepored = resResult2.data
}
onLoad()

</script>

<style lang="less" scoped>
.BD {
    height: 20vh;
    background-size: 100% 100%;
    background-image: url(../../assets/images/home/sky.png);
}

.block {
    height: 9vh;
}

.head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2vw;

    h1 {
        font-size: 5vw;
    }
}

.function {
    margin-bottom: 2vh;

    ul {
        width: 90%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding: 0 4vw 0 4vw;


        background-color: @--base-white;
        border-radius: 10px;
        border: 4px solid #ffffff;
        box-shadow: 0px 0px 5px 2px#919191;

        img {
            width: 15vw;
            height: 15vw;
        }

        li {
            font-size: 5vw;
            text-align: center;

        }
    }
}

.order {
    padding: 1vw;
    width: 90%;
    height: 15vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;

    background-color: @--base-white;
    border-radius: 10px;
    border: 4px solid #ffffff;
    box-shadow: 0px 0px 5px 2px#919191;

    div {
        display: flex;
        flex-direction: row;
        align-items: center;

        .text {
            margin-left: 5vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }

    h2 {
        font-size: 4vw;
    }
}

.post {
    margin-top: 3vh;

    ul {
        margin: 0 auto;
        width: 90%;
        background-color: @--base-white;
        border-radius: 10px;
        border: 4px solid #ffffff;
        box-shadow: 0px 0px 5px 2px#919191;

        li {
            width: 90%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
        }
    }
}
</style>